<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        color: #515151;
      }
      .user-info-card {
        display: flex;
        
        background-color: #ededed;
        align-items: center;
        justify-content: space-between;
        padding: 15px 35px;
      }
      a{
        text-decoration: none;
        color:#37b5b9;
      }
      .dis-f {
        display: flex;
      }
      .user-info-card .info-left {
        display: flex;
        align-items: center;
      }
      .info-left img {
        margin-right: 25px;
      }
      .info-left {
        flex: 1;
      }
      .hr {
        align-self: stretch;
        width: 1px;
        border-left: 1px solid #19bebe;
        margin: 5px;
      }
      .info-right {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .icon{
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="user-info-card">
      <div class="info-left">
        <div>
          <img src="../images/iframe/user.png" alt="" />
        </div>
        <div>
          <h4>用户名</h4>
          <div>积分:198分</div>
          <div>我的消息:0条</div>
        </div>
      </div>
      <div class="hr"></div>
      <div class="info-right">
        <div class="dis-f">
          <div class="icon">
            <img src="../images/iframe/weixin1.png" alt="" />
          </div>
          <div>
            <div>绑定微信</div>
            <div>未绑定 <a href="#">立即绑定</a></div>
          </div>
        </div>
        <div class="dis-f">
          <div class="icon">
            <img src="../images/iframe/phone.png" alt="" />
          </div>
          <div>
            <div>绑定手机</div>
            <div>未绑定 <a href="#">立即绑定</a></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
